<template>
  <div class="register-body">
    <div class="second">
      <el-row>
        <el-col :span="24">
          <el-steps :active="1" align-center>
            <el-step title="验证手机号"></el-step>
            <el-step title="填写帐号密码"></el-step>
            <el-step title="完成注册"></el-step>
          </el-steps>

        </el-col>
      </el-row>
      <div class="step1">
        <el-row>
          <el-col :span="24">
            <div>
              <el-input placeholder="请输入手机号" v-model="input1">
                <template slot="prepend">+86</template>
              </el-input>
            </div>

          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-button type="primary" disabled>发送验证码</el-button>

          </el-col>

        </el-row>
        <el-row>
          <el-col :span="24">
            <el-input v-model="input" placeholder="请输入验证码"></el-input>

          </el-col>
        </el-row>

        <el-row>
          <el-col>
            <el-button type="primary" disabled>下一步</el-button>

          </el-col>

        </el-row>

        <el-row class="tips">
          <el-col :span="24">
            <span>立即登录</span> | <span>忘记密码</span>
          </el-col>

        </el-row>
      </div>
      <div class="step2" style="display: none">
        <el-row>
          <el-col :span="24">
            <div>
              <el-input placeholder="请输入用户名" v-model="input1">

              </el-input>
            </div>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-input placeholder="请输入密码" v-model="input" show-password></el-input>


          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-input placeholder="再次输入密码" v-model="input" show-password></el-input>


          </el-col>

        </el-row>
        <el-row>
          <el-col :span="12">
            <el-button type="primary" disabled>上一步</el-button>
          </el-col>

          <el-col :span="12">
            <el-button type="primary" disabled>下一步</el-button>

          </el-col>
        </el-row>


      </div>
      <div class="step3" style="display: none">
        <el-row>
          <el-col :span="24">
            <div>
              <h2>注册成功</h2>
            </div>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <span>恭喜！您的帐号</span>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <span style="color: #31BBAC">vpnbook1@yeah.net</span>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <span>已经注册成功！</span>

          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-button type="primary" disabled>立即登录</el-button>

          </el-col>
        </el-row>
      </div>

    </div>
  </div>
</template>

<script>


export default {
  name: "register",
  layout: 'register',

}
</script>

<style lang="scss">
.register-body {
  display: flex;
  margin: 30px 0;
  text-align: center;
  align-items: center;

  .el-row {
    margin: 30px 0;
  }

  .second {
    width: 1000px;
    height: 500px;
    margin: 0 auto;
    background: #FFFFFF;
    text-align: center;

  }

  .el-input {
    width: 300px;
  }

  .tips {
    font-size: 12px;
    color: #999;

  }

  .el-button {
    width: 300px;
    border: none;
    background: #13D1BE;
    font-size: 16px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    vertical-align: -1px;

    i {
      font-weight: bold;
    }
  }

  .step2 {
    .el-row:last-child {
      text-align: center;
    }
  }
}
</style>
